<script setup>
import {onMounted, ref} from "vue";
import temblorRegion from "@/api/temblor/temblorRegion.js";
import {Message} from "@arco-design/web-vue";

const tableData = ref([])
onMounted(() => {
  getTableData()
})
const getTableData = () => {
  temblorRegion.tree().then(res => {
    tableData.value = res.data
  })
}
const columns = [
  {
    title: '名称',
    dataIndex: 'label',
  },
  {
    title: "操作",
    slotName: "action",
  }

]
const formData = ref({
  label: "",
  pid: 0
})
const visible = ref(false)
const editRegion = (record) => {
  if (record != null) {
    title.value = "修改"
    formData.value = record
  } else {
    title.value = "新增"
  }
  visible.value = true
}
const title = ref()
const handleOk = () => {
  temblorRegion.regionSave(formData.value).then(res => {
    if (res.code === 200) {
      visible.value = false
      getTableData()
      Message.success("操作成功")
      formData.value = {}
    } else {
      Message.error("操作失败")
    }
  })
}
const handleCancel = () => {
  formData.value = {}
  visible.value = false
}
const deleteUser = (id) => {
  temblorRegion.regionDel({
    id: id
  }).then(res => {
    if (res.code === 200) {
      Message.success("操作成功")
      getTableData()
    } else {
      Message.error("操作失败")
    }


  })
}
</script>

<template>
  <a-button type="primary" @click="editRegion(null)">新增</a-button>
  <a-table style="margin-top: 1rem" row-key="value" :columns="columns" :data="tableData">
    <template #action="{record}">
      <a-space>
        <a-button @click="editRegion(record)" type="primary">修改</a-button>
        <a-popconfirm content="确定删除吗?" type="error" @ok="deleteUser(record.value)">
          <a-button type="primary" status="danger">删除</a-button>
        </a-popconfirm>
      </a-space>
    </template>
  </a-table>
  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      {{ title }}
    </template>
    <div>
      <a-form :model="formData">
        <a-form-item field="name" label="名称">
          <a-input v-model="formData.label"/>
        </a-form-item>
        <a-form-item label="所属区域">
          <a-cascader :options="tableData" v-model="formData.pid"
                      placeholder="请选择所属区域 不填为最高级 ..." check-strictly/>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<style scoped>

</style>